<template>
  <div class="article-container">
    <el-card class="filter-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面包屑footer -->
      </div>
      <!-- 数据筛选 -->
      <el-form ref="form" :model="form" label-width="80px" size="mini">
        <el-form-item label="状态">
          <el-radio-group v-model="status ">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="频道">
          <el-select v-model="channelId" placeholder="请选择频道">
            <el-option :label="channel.name" :value="channel.id" v-for="(channel,index) in channels" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="rangDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadArticles(1)">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 数据筛选 footer-->
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">根据筛选条件共查询到{{totalcount}}条结果</div>
      <!-- 数据列表-->

      <!-- -Table 表格组件
      1、把需要展示的数组列表数据绑定给table组件的data属性
      2、表格有了: data属性时
      不用再v -for 遍历，他自己会遍历
      3、设计表格列
      width可以设定表格列的宽度
      label 可以设置列的标题
      prop 用来设定要渲染的列表项数据字段,注意只能展示文本
      4、如果表格列默认只能渲染普通文本，如果需要展示其他功能，那么就需要自定义表格列模版-element-ui中有使用方法
      
      -->

      <el-table :data="artlist" stripe style="width: 100%" class="list-table" size="mini">
        <el-table-column prop="date" label="封面">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.cover.images[0]" fit="cover" lazy>
              <div slot="placeholder" class="image-slot">
                加载中
                <span class="dot">...</span>
              </div>
            </el-image>
            <!-- <img v-if="scope.row.cover.images[0]" class="artcover" :src="scope.row.cover.images[0]" alt />
            <img v-else class="artcover" src="./imger/nocover.jpeg" alt />-->
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <!-- 现在需要获取在自定义列末班中获取当前遍历下的数据，
            那么就在template 上声明  slot-scope='scope'
            -->
            <el-tag :type="artstatus[scope.row.status].type">{{artstatus[scope.row.status].text}}</el-tag>
            <!-- <el-tag type="success" v-else-if="scope.row.status===1">待审核</el-tag>
            <el-tag type="info" v-else-if="scope.row.status===2">审核通过</el-tag>
            <el-tag type="warning" v-else-if="scope.row.status===3">审核失败</el-tag>
            <el-tag type="danger" v-else-if="scope.row.status===4">已删除</el-tag>-->
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间"></el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 数据列表footer -->
      <!-- 列表分页 -->
      <el-pagination :page-size="pageSize" background layout="prev, pager, next" :total="totalcount" @current-change="onCurrentchange" />
      <!-- page-size  设置每页显示数据条数 -->
    </el-card>
  </div>
</template>

<script>
import { getArticleS, getArticleChannels } from "@/api/article";
export default {
  name: "ArticleIndex",
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      tableData: [],
      artlist: [], //文章数量
      artstatus: [
        {
          status: 0,
          text: "草稿",
          type: "",
        },
        { status: 1, text: "待审核", type: "success" },
        {
          status: 2,
          text: "审核通过",
          type: "info",
        },
        {
          status: 3,
          text: "审核失败",
          type: "warning",
        },
        {
          status: 4,
          text: "已删除",
          type: "danger",
        },
      ],
      totalcount: 0, //总数据条数
      pageSize: 20, //每页大小
      status: null, //查询文章状态
      channels: [], //文章频道列表
      channelId: null, //查询文章频道
      rangDate: null, //筛选的范围日期
    };
  },
  created() {
    this.loadChannels(); //频道列表
    this.loadArticles(1);
  },
  methods: {
    loadArticles(page = 1) {
      getArticleS({
        page,
        per_page: this.pageSize,
        status: this.status,
        channel_id: this.channelId,
        begin_pubdate: this.rangDate ? this.rangDate[0] : null, //开始日期
        end_pubdate: this.end_pubdate ? this.rangDate[1] : null, //截止日期
      }).then((res) => {
        const { results, total_count: totalCount } = res.data.data;
        // 解构赋值   这里total_count必须是驼峰式因为数据是total_count所以重命名加冒号：后面是新名字
        this.artlist = results;
        this.totalcount = totalCount;
      });
    },
    // 频道
    loadChannels() {
      getArticleChannels().then((res) => {
        this.channels = res.data.data.channels;
      });
    },

    onSubmit() {
      console.log("submit!");
    },
    onCurrentchange(page) {
      //点击的页码

      this.loadArticles(page);
    },
  },
  components: {},
};
</script>

<style scoped lang='scss'>
.filter-card {
  margin-bottom: 30px;
}
.list-table {
  margin-bottom: 20px;
}
.artcover {
  width: 100px;
  height: 75px;
  background-size: cover;
}
</style>
